.main{
    width: 1520px;
    height: 2000px;
    cursor: pointer;
}
.banxin{
    width: 1200px;
    height: 4000px;
    margin: 0 auto;
/*     background-color: bisque; */
background-color: white;
    display: flex;
}
.nav{
    height: 30px;
    background-color: white; 
    display: flex;
    flex-wrap: wrap;
}
.a1{
    width: 80px;
    height: 28px;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
    display: inline-block;
}
.z1{
    width: 17px;
    height: 17px;
    vertical-align: middle;
}
a{
    text-decoration: none;
    color: black;
    display: inline-block;
    font-size: 12px;
}
a:hover{
    color: blue;
}
.a1:hover{
   color: rgb(58, 58, 222);
}
.a2{
    width: 45px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
    
}
.jl{
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(img/iconfont.png);
    background-repeat: no-repeat;
   background-position: 0px 0px;  
   position: absolute;
    left: 296px;
    top: -6px;
}
.s1{
    font-size: 12px;
    line-height: 28px;
    text-align: center;
    display: inline-block;
    width: 36px;
    height: 28px;
}
.a2:hover .jl{
    background-position: 0px -127px;  
}
.diqu{
    width: 400px;
    height: 400px;
    border: 1px solid grey;
    background-color: white;
    position: absolute;
    left: 274px;
    top: 32px;
    box-sizing: border-box;
    display: none; 
    z-index: 999;
}
.d1{
    width: 400px;
    height: 50px;
    
    display: flex; 
}
.d11{
    width: 65px;
    height: 50px;
    font-size: 18px;
    text-align: center;
    color: darkgrey;
    line-height: 50px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}
.d12{
    flex: 1;
    border-bottom: 1px solid gray;
}
li{
    list-style: none;
}
.hua1{
    display: inline;
    
}
.hua{
   line-height: 20px;
   width: 400px;
font-size: 15px;
margin-bottom: 20px;
margin-top: 10px;

    
}
.d111{
    display: inline-block;
   /*  width: 25px;
    height: 20px; */
    border-right: 1px solid gray;
    color: gray;
}
.a2:hover .diqu{
    display: block;
}
.ex{
    width: 120px;
    height: 30px;
    
    font-size: 12px;
    line-height: 30px;
      text-indent: 20px;
}
.lvxin{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg.png);
    background-position: -10px -428px;
    position: absolute;
    left: 338px;
    top:5px;
    
}
.exa:hover{
color: orange;
}
.k{
    width: 450px;
    height: 30px;
    /* background-color: rgb(216, 196, 255); */
}
.denglu{
    width: 35px;
    height: 30px;
    margin-left: 10px;
    line-height: 30px;
}
.zhuce{
    width: 35px;
    height: 30px;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 30px;
}





.gowuche{
    line-height: 30px;
    text-indent: 12px;
    width: 90px;
    height: 30px;
}
.che{
    width: 30px;
    height: 30px;
    background-image: url(img/iconfont.png);
    background-position: 0 -270px;
    position: absolute;
    left: 977px;
    top:0px;
}
.wode{
    width: 90px;
    height: 30px;
    text-indent: 12px;
    line-height: 30px;
}
.ren{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg.png);
    background-position: -306px -42px;
    position: absolute;
    right:418px;
    top:6px;
}
.san::after{
    content: "";
 
    display: inline-block;
    border: 8px solid transparent;
    border-top: 8px solid gray;
    position: absolute;
    right:354px;
    top:14px;
}
.wode:hover .san::after{
    border-top: 0px solid transparent;
    border-bottom: 8px solid gray;
}
.ren2{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg.png);
    background-position: -349px -42px;
    position: absolute;
    right:325px;
    top:6px;
}
.san2::after{
    content: "";
 
    display: inline-block;
    border: 8px solid transparent;
    border-top: 8px solid gray;
    position: absolute;
    right:282px;
    top:14px;
}
.wode:hover .san2::after{
    border-top: 0px solid transparent;
    border-bottom: 8px solid gray;
}
.wddd{
    font-size: 12px;
    width: 90px;
    display: none;
    border: 1px solid gray;
    box-shadow: 2px 2px 5px 1px gray;
    position: absolute;
    text-indent: 5px;
}
.dian{
    width: 10px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg2.png);
    background-position: 0px -253px;
}
.dian2{
    width: 10px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg2.png);
    background-position: 0px -253px;
}
.dian3{
    width: 10px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg2.png);
    background-position: 0px -253px;
}
.dian4{
    width: 10px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg2.png);
    background-position: 0px -253px;
}
.dian5{
    width: 10px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg2.png);
    background-position: 0px -253px;
}
.wode:hover .wddd{
    display: block;
z-index: 1;
float: left;
}
.dian6{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg2.png);
    background-position: 7px -251px;
    
}

.sj{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(img/iconfont.png);
    background-position: -5px -418px;
    position: absolute;
    right:258px;
    top: 5px;
}
.sj2{
    line-height: 30px;
}
.erweima{
    width: 60px;
    height: 60px;
    z-index: 999;
    position: absolute;
    right: 213px;
    top: 31px;
    display: none;
}
.shouji:hover .erweima{
    display: block;
    
}
.wt{
    color: red;
    line-height: 30px;
    text-indent: 5px;
}
/* 以上是导航栏 */
.part2{
    width: 100%;
    height: 110px;
    background-color:white;
    display: flex;
}
.ewm{
    width: 300px;
    height: 110px;
    
}
.kuang{
    width: 500px;
    height: 110px;
   /*  background-color: aquamarine; */
}
.input1{
    width: 413px;
    height: 34px;
    position: absolute;
    left:461px;
    top:63px;
    font-size: 20px;
    text-indent: 20px;
    color: darkgrey;
    outline: none;
    border: none;
    border: 2px solid green;
}
.input2{
    width: 78px;
    height: 34px;
    background-color: green;
    position: absolute;
    left:875px;
    top:65px;
    outline: none;
    border: none;
}
.remen{
    width: 500px;
 margin-top: 10px;
    display: flex;
    position: absolute;
    left: 460px;
    top: 100px;
    justify-content: space-around;

}
.remen1{
    border-right: 1px solid gray;
    text-align: center;
    padding-right: 20px;
}
.reman3{
    color: gray;
    font-size: 12px;
}
.hong{
    color: red;
}
.hong:hover{
    color: red;
}
.hui{
    color: rgb(89, 92, 94);
}
.hui:hover{
    color: black;
}
.dongche{
    width: 80px;
    height: 50px;
}
.dong{
    position: absolute;
    right: 160px;
    top: 60px;
}
.part3{
    width: 100%;
    height: 35px;
    display: flex;
}
#t1{
    width: 114px;
    height: 34px;
    text-align: center;
    line-height: 35px;
}
#t{
    width: 114px;
    height: 34px;
    text-align: center;
    line-height: 35px;
}
.sd{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url();
}
#zhuan{
    display: inline-block;
    transition: 1s;
}
.gou:hover #zhuan{
 transform: rotate(180deg);
}
.shang:hover #zhuan{
    transform: rotate(180deg);
}
.pin1{
width: 120px;
height: 35px;

}
.pin2{
    width: 120px;
    height: 35px;
   
    }
    .pin3{
        width: 120px;
        height: 35px;
     
        }
.g1{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 407px;
    top: 149px;
   
}
.g2{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 524px;
    top: 149px;
}
.g3{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 644px;
    top: 149px;
}
.p1{
    line-height: 35px;
    text-indent: 42px;
    font-size: 15px;
}
.pp2{
line-height: 35px;
text-indent: 42px;
font-size: 15px;
}
.pp3{
    line-height: 35px;
text-indent: 42px;
font-size: 15px;
}
.pin1:hover .g1{
transform: rotateZ(360deg);
transition: 1s;
}
.pin2:hover .g2{
    transform: rotateZ(360deg);
    transition: 1s;
    }
    .pin3:hover .g3{
        transform: rotateZ(360deg);
        transition: 1s;
        }
        .pin1:hover .p1{
            color: green;
        }
        .pin2:hover .pp2{
            color: green;
        }
        .pin3:hover .pp3{
            color: green;
        }
        .part4{
            width: 100%;
            height: 360px;
           
              display: flex;
           position: relative;
        }
        .lz{
            width: 228px;
            height: 360px;
            background-color: rgb(203, 203, 206);
        
        }
        .gouzhan{
            width: 228px;
            height: 180px;
        }
.maozhan{
    width: 228px;
    height: 180px;
}
#ww1{
    z-index: 999;
}
#ww2{
    z-index: 999;
}
#ww3{
    z-index: 999;
}
#ww4{
    z-index: 999;
}
#ww5{
    z-index: 999;
}
.gp{
    padding-left: 65px;
    padding-top: 20px;
}
.shuo{
    color: brown;
    color: 12px;
    text-align: center;
}
.zh{
    color: black;

}
.an1{
    width: 110px;
    height: 30px;
    margin-left: 60px;
    margin-top: 10px;
}
.lunbo{
    width: 770px;
    height: 360px;
    
}
/* html,
      body {
        position: relative;
        height: 360px;
        width: 770px;
      } */


      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .swiper-pagination-bullet {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color: #000;
        opacity: 1;
        background: rgba(0, 0, 0, 0.2);
      }

      .swiper-pagination-bullet-active {
        color: #fff;
        background: #007aff;
      }

.nan{
    width: 228px;
    height: 360px;
    background-color: rgb(231, 231, 235);
    position: absolute;
    left: 0px;
    top: 0;
    display: none;
}
#ww1{
display: none;
}
#xxx{

text-align: center;
line-height: 72px;
}
.yih{
    width: 228px;
    height: 70px;
    border-bottom: dashed gainsboro;
    position: relative;
}
#xxx a{
    font-size: 14px;
    display: inline-block;
    width: 86px;
    height: 71px;
    
}
.sanjiao{
    width: 20px;
    height: 20px;
    display: inline-block;
    
    background-image: url(img/iconfont.png);
    background-position: 0 -567px;
}
#ww1{
position: absolute;
left: 229px;
top: 0;
}
#ww2{
    display: none;
    position: absolute;
left: 229px;
top: -71px;
}
#ww3{
    display: none;
    position: absolute;
left: 229px;
top: -142px;
}

#ww4{
    display: none;
    position: absolute;
left: 229px;
top: -213px;
}

#ww5{
    display: none;
    position: absolute;
left: 229px;
top: -284px;
}


.you{
   flex: 1;


   
}
.you1{
    width: 200px;
    height: 119px;
    border-bottom: 1px dashed gray;
  position: relative;
}
.you2{
    width: 200px;
    height: 119px;
    border-bottom: 1px dashed gray;
    position: relative;
}
.you3{
    width: 200px;
    height: 119px;
    position: relative;
    
}
#zd{
  
    position: absolute;

    top: 0;
  
}
#zd2{
    position: absolute;
    top: 0;
}
#zd3{
    position: absolute;
    top: 0;
}
.part5{
    width: 1200px;
    height: 625px;
   position: relative;
 

}
.bt{
    width: 100%;
    height: 80px;
   
    display: flex;
    position: relative;
}
.bt1{
    width: 150px;
    height: 80px;
 
    position: relative;

}
h2{
    font-weight: normal;
    display: inline-block;
    line-height: 80px;
text-indent: 44px;
}
.gl{
position: absolute;
left:8px; 
top: 24px;
 
}
.bt2{
    width: 60px;
    height: 30px;
    border: 1px solid gainsboro;
   /*  border-top: 1px solid gainsboro;
    border-left: 1px solid gainsboro;
    border-bottom: 1px solid green;
    border-right: 1px solid green; */
}
.bt3{
    width: 86px;
    height: 30px;
    border: 1px solid gainsboro;
   /*  border-top: 2px solid green;
  
    border-right: 1px solid green; */
}
.bt4{
    width: 86px;
    height: 30px;
    border: 1px solid gainsboro;
   /*  border-bottom: 1px solid green;
    border-top: 1px solid gainsboro;
    border-right: 1px solid gainsboro; */
}
.bao3{
position: absolute;
right: 0;
bottom: 0;
font-size: 14px;
}
.bao3 span{
    display: inline-block;
    line-height: 30px;
text-align: center;
}
.duo{
    width: 100%;
    height: 477px;
    display: flex;
}
.naifen{
    width: 328px;
    height: 477px;
    position: relative;
}
.tou{
    width: 328px;
    height: 217px;
    background-color: rgba(250, 250, 246, 0.5);
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;

}
.xk{
     flex: 1; 
  

    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; 
    display: none;
   
  
}
.xhz{
    width: 197px;
    height: 217px;
    border: 1px solid gainsboro;
    display: inline-block;
}

.hx{
    width: 100%;
    height: 40px;
    
    display: flex;
    position: relative;
}
.hx1{
    width: 80px;
    height: 40px;
    
    margin-left: 15px;
    border-bottom: 1px solid rgb(26, 21, 21);
}
.hx2{
    width: 80px;
    height: 40px;

    margin-right: 15px;
    border-bottom: 1px solid rgb(19, 18, 18);
    position: absolute;
    right: 0px;
    top: 0;
}
.huo{
    width: 30px;
    height: 30px;
    position: absolute;
    left: 107px;
    top: 10px;
}
.huo2{
    font-size: 20px;
    color: rgb(15, 13, 13);
    line-height: 50px;
    text-align: center;
    text-indent: 45px;
}
.aipu{
    flex: 1;
  justify-content: space-around;
  flex-wrap: wrap;
  display: flex;

}
.hx22{
    width: 90px;
    height: 25px;
    background-color: #eee;
    border-radius: 10px;
    margin-top: 25px;
}
.ap{
    display: inline-block;
    font-size: 12px;
    text-align: center;
    line-height: 25px;
    text-indent: 25px;
   
}
.zdy2{
    width: 120px;
    height: 120px;
    margin-left: 40px;
    margin-top: 15px;
   /*  position: absolute; */
}
.vvv{
    display: block;
    color: rgb(117, 7, 7);
    font-size: 18px;
}
.ccc{
    font-size: 8px;
    padding: 10px;
}
.xxh{
    width: 148px;
height: 65px;
}
.xk2{
    width: 870px;
    height: 477px;
    background-color: #fff;
position: absolute;
right: 0;
top: 80px;
/* display: none; */
}
.xkk1{
    height: 300px;
    width: 870px;
  
    box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
}
.zxk{
    width: 389px;
    height: 299px;
    background-image: url(img/n8.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid gray;
}

.bi{
    font-size: 20px;
    text-indent: 20px;
    padding-top: 40px;
    
}
.tian{
    font-size: 18px;
    color: rgb(117, 7, 7);
    text-indent: 20px;
}
.yxk1{
flex: 1;


}
.yxk2{
    width: 100%;
    height: 149px;
background-color: chocolate;
background-image: url(img/n9.jpg);
background-repeat: no-repeat;
background-size: cover;
border: 1px solid gray;
} 
.yxk3{
    width: 100%;
    height: 149px;
  /*   background-color: #007aff; */
    background-image: url(img/n9.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid gray;
}
.xkk2{
    display: flex;
    width: 100%;
    height: 177px;
justify-content: space-around;
flex-wrap: nowrap;
}
.kkk1{
    width: 289px;
    height: 100%;
    border: 1px solid gray;
    background-image: url(img/n10.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}
 .xk3{
    width: 870px;
    height: 477px;
    display: flex;
    flex-wrap: wrap;
 
    display: none;
    
   /*  //国产狗粮绑定的 */
   position: absolute;
   left: 330px;
   top: 79px;
   
 }

 .bt2:hover{
    border: 1px solid green;
    border-bottom: 1px solid transparent;
 }
 
 .bt3:hover{
    border: 1px solid green;
    border-bottom:  1px solid transparent;
 }
 .bt4:hover{
    border: 1px solid green;
    border-bottom:  1px solid transparent;
 }
 .zxk:hover{
    background-position: -20px 0;
    transition: 1s;
 }

 .yxk2:hover{
    background-position: -15px 0;
    transition: 1s;
 }
 .yxk3:hover{
    background-position: -15px 0;
    transition: 1s;
 }
 .kkk1:hover{
    background-position: -15px 0;
    transition: 1s;
 }
 .xhz:hover .zdy2{
    transform: translateY(-10px);
    transition: 1s;
 }
 
 
 .heng{
    width: 100%;
    height: 66px;
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
}
.pai{
width: 148px;
height: 66px;
border: 1px solid gainsboro;
}

 .part6{
    width: 1200px;
    height: 100px;
    display: flex;
    margin-top: 30px;
    border-top: 1px solid gray;
    background-color: #e8e9eb;
    /* justify-items: center; */
    /*  align-items: center; */
    flex-wrap: nowrap;
 
    position: absolute;
    left: 159px;
    top: 3661px;
 }
 .bnm{
    margin-top: 20px;
    width: 200px;
    height: 62px;
   
    position: relative;
 }
 .xin{
    width: 70px;
    height: 50px;
 }
 .zpbz{
   
    font-size: 20px;
  display: inline-block;
 position: absolute;
 left: 80px;
 top: 15px;
 }
 .bnm:hover .xin{
   
    transition: 1s;
    transform: translateY(-10px);

 }
 .bnm:hover .zpbz{
    color: red;
    transition: 1s;
    transform: translateY(-10px);
 }

 .part7{
    width: 1200px;
    height: 180px;
    border-top: 1px solid gray;
    background-color: #e8e9eb;
    position: absolute;
    left: 159px;
    top: 3791px;
    display: flex;
 }
 .dg{
    width: 105px;
    height: 99px;
 }
.vcb{
    width: 217px;
    height: 180px;
}
.ko1{
    line-height: 40px;
    margin-left: 44px;
}

.hh1{
font-size: 14px;
font-weight: bold;
}
.hh2{
    font-size: 20px;
}
.hhh2{
    font-size: 12px;
}
.hh3{
    font-size: 20px;
}
.hh4{
    font-size: 12px;
}

.ko2{
    width: 75px;
    height: 180px;
    margin-left: 90px;
}
.ooo{
    line-height: 30px;
    font-size: 14px;
}
#jian{
    margin-bottom: 30px;
}
.ecv{
    width: 92px;
    height: 92px;
}
.ko3{
    width: 92px;
    margin-left: 210px;
}
.ko4{
width: 92px;
margin-left: 120px;
}

.part8{
    width: 1200px;
    height: 180px;
    border-top: 1px solid gray;
    background-color: #e8e9eb;
    position: relative;
    position: absolute;
    left: 159px;
    top: 3972px ;
}
.lkj{
    width: 900px;
    height: 18px;
    display: flex;
   
    justify-content: space-around;
    position: absolute;
    left: 130px;
    top: 0;
  
}
.nji{
    width: 84px;
    height: 18px;
}
#vxz{
    padding-top: 7px;
}
.nji:hover{
    color: rgb(117, 7, 7);
    text-decoration: underline;
}
.bhg{
    width: 560px;
    height: 27px;
   
    margin-top: 32px;
    margin-left:320px;
    display: flex;
    justify-content: space-around;

}
.oiu{
    width: 80px;
    height: 27px;
    margin-left: 10px;
    border-radius: 10px;
 
    background-image: url(img/plk.jpg);
}
.ds2{
    margin-top: 20px;
    margin-left: 120px;
}
.vbh:hover{
    color: rgb(117, 7, 7);
    text-decoration: underline;
}
.vbhh{
    margin-left: 280px;
}
.vbhh:hover{
    color: rgb(117, 7, 7);
    text-decoration: underline;
}



.hei{
    width: 35px;
    height: 100%;
    background-color: #000;
    position: fixed;
    right: 0;
    top: 0;
}
.vvvc{
    width: 300px;
    height: 300px;
    background-color: rgb(219, 215, 222);
    border: 1px solid silver;
    font-size: 28px;
    text-align: center;
    line-height: 300px;
    position: absolute;
    right: 35px;
    top:150px ;
    display: none;
}
.za{
    width: 28px;
    height: 25px;
    display: inline-block;

    background-image: url(img/iconfont.png);
    background-position: -6px -240px;
    position: absolute;
    right: 0;
    top: 150px;
}

.deng:hover .vvvc{
    display: block;
}
.hgc{
    background-color: #007aff;
    color: rgb(202, 228, 228);
}

.xdc{
width: 35px;
height: 80px;
display: block;
width: 25px;
height: 25px;
background-image: url(img/iconfont.png);
background-position: -5px -273px;
position: absolute;
right: 0;
top: 190px;
}
.ko{
    width: 14px;
    height: 50px;
    font-size: 14px;
    position: absolute;
right: 0;
top: 210px;
margin-right: 10px;
margin-top: 5px;
}
.dfv{
    width: 300px;
    height: 100px;
    color: #000;
    background-color: #e8e9eb;
    border: 1px solid gray;
    position: absolute;
right: 35px;
top: 200px;
display: none;
font-size: 14px;
line-height: 100px;
text-align: center;
}
.hgc:hover .dfv{
    display: block;
}


.hgc2{
    background-color: #007aff;
    color: rgb(202, 228, 228);
}

.xdc2{
width: 35px;
height: 80px;
display: block;
width: 25px;
height: 25px;
background-image: url(img/iconfont.png);
background-position: -10px -381px;
position: absolute;
right: 0;
top: 390px;
}
.ko2{
    width: 14px;
    height: 50px;
    font-size: 14px;
    position: absolute;
    color: #eee;
right: 0;
top: 410px;
margin-right: 10px;
margin-top: 5px;
}


.hgc3{
    background-color: #007aff;
    color: rgb(202, 228, 228);
}

.xdc3{
width: 35px;
height: 80px;
display: block;
width: 25px;
height: 25px;
background-image: url(img/iconfont.png);
background-position: -10px -308px;
position: absolute;
right: 0;
top: 500px;
}

 .dfv3{
    width: 300px;
    height: 100px;
    color: rgb(18, 17, 17);
    background-color: #e8e9eb;
    border: 1px solid gray;
    position: absolute;
right: 35px;
top: 490px;
display: none;
font-size: 14px;
line-height: 100px;
text-align: center;
}
 .hgc3:hover .dfv3{
    display: block;
}  


.hgc4{
    background-color: #007aff;
    color: rgb(202, 228, 228);
}

.xdc4{
width: 35px;
height: 80px;
display: block;
width: 25px;
height: 25px;
background-image: url(img/iconfont.png);
background-position: -10px -342px;
position: absolute;
right: 0;
top: 530px;
}

  .dfv4{
    width: 300px;
    height: 400px;
    color: rgb(18, 17, 17);
    background-color: #e8e9eb;
    border: 1px solid gray;
    position: absolute;
right: 35px;
top: 540px;
display: none;
font-size: 14px;
line-height: 100px;
text-align: center;
}
 .hgc4:hover .dfv4{
    display: block;
}   


.hgc5{
    background-color: #007aff;
    color: rgb(202, 228, 228);
}

.xdc5{
width: 35px;
height: 80px;
display: block;
width: 25px;
height: 25px;
background-image: url(img/iconfont.png);
background-position: -10px -415px;
position: absolute;
right: 0;
top: 630px;
}
.dfv5{
    
    color: rgb(18, 17, 17);
    background-color: #e8e9eb;
    border: 1px solid gray;
    position: absolute;
right: 35px;
top: 355px;
display: none;
font-size: 14px;
line-height: 100px;
text-align: center;
}

.hgc5:hover .dfv5{
    display: block;
}


.hgc6{
    background-color: #007aff;
    color: rgb(202, 228, 228);
}

.xdc6{
width: 35px;
height: 80px;
display: block;
width: 25px;
height: 25px;
background-image: url(img/iconfont.png);
background-position: -10px -452px;
position: absolute;
right: 0;
top: 660px;
}
.dfv6{
    
    color: rgb(18, 17, 17);
    background-color: #e8e9eb;
    border: 1px solid gray;
    position: absolute;
right: 35px;
top: 665px;
display: none;
font-size: 14px;
line-height: 100px;
text-align: center;
}

.hgc6:hover .dfv6{
    display: block;
}


.hgc7{
    background-color: #007aff;
    color: rgb(202, 228, 228);
}

.xdc7{
width: 35px;
height: 80px;
display: block;
width: 25px;
height: 25px;
background-image: url(img/iconfont.png);
background-position: -10px -483px;
position: absolute;
right: 0;
top: 690px;
}
.dfv7{
    
    color: rgb(18, 17, 17);
    background-color: #e8e9eb;
    border: 1px solid gray;
    position: absolute;
right: 35px;
top: 685px;
display: none;
font-size: 14px;
line-height: 100px;
text-align: center;
}

.hgc7:hover .dfv7{
    display: block;
}

/* //以上是主页面 */


